<template>
<div class="dept">
  <div class="select" style="display: inline-flex;">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="年月">
        <el-date-picker
            v-model="form.salaryYearMonth"
            @change="getDataList"
            type="month"  size="small"
            placeholder="选择月"
            :clearable="false">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="getDataList">筛选</el-button>
        <el-button size="small" type="primary" @click="get">重新计算数据</el-button>
<!--              <el-button type="primary"  size="small" @click="exportData">导出</el-button>-->
<!--              <el-button type="primary"  size="small" @click="exportData1">导出全部</el-button>-->
      </el-form-item>

    </el-form>
  </div>
  <el-table :data="tableData" row-key="dept"
            border
            show-summary
            :tree-props="{children: 'list', hasChildren: 'hasChildren'}"
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}">
    <el-table-column label="部门" prop="dept" min-width="180" fixed="left"></el-table-column>
    <template v-for="item in monthData">
      <el-table-column :label="item.date+'（'+item.day+'）'" min-width="180">
        <el-table-column label="人数" :prop="'peopleNum'+item.dayIndex" min-width="60">
        </el-table-column>
        <el-table-column label="金额" :prop="'totalAmount'+item.dayIndex" min-width="120">
          <template slot-scope="scope">
            {{getObjectProperty(scope,item.dayIndex)}}
          </template>
        </el-table-column>
      </el-table-column>
    </template>

  </el-table>
</div>
</template>

<script>
import ToolBar from "@/components/common/ToolBar";
import moment from "moment";
export default {
  name: "DeptDataDetail",
  components: {ToolBar},
  data(){
    return{
      form:{
        salaryYearMonth:moment().format("YYYY-MM-01")
      },
      tableData:[],
      monthData: []
    }
  },
  created() {
    this.getDataList()
  },
  methods:{
    getObjectProperty(scope,dayIndex) {
      return eval("scope.row.totalAmount" +dayIndex);
    },
    rounding(row,column) {
      if (row[column.property]) {
        return parseFloat(row[column.property]).toFixed(2)
      }
    },
    getDataList(){
      axios.post("/fin_wages_person_detail_day/list",this.form).then(res=>{
        console.log("Res:",res)
        this.tableData=res.data.data
        this.monthData = this.$tools.getMonthData(this.form.salaryYearMonth)
      })
    },
    get(){
      axios.post("/fin_wages_person_detail_day/get",this.form).then(res=>{
        console.log("Res:",res)
        if(res.data.success){
          this.getDataList()
        }
      })
    },
    formater(num){
      // const number1=num.toString().split(".")[0]
      // const number2=num.toString().split(".")[1]
      // const numbers = number1.toString().split('').reverse()
      // console.log(numbers)
      // const segs = []
      // // const startIndex=number.indexOf(".")
      // while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
      //
      // return segs.join(',').split('').reverse().join('')+"."+number2
    }
  }
}
</script>

<style scoped>

</style>
